<template>
  <div>
    <s-container>
      <template #btnBar>
        <n-button type="primary" @click="handleQuery">刷新</n-button>
        <s-bar-add-btn @click="handleAddClick" />
      </template>
      <template #dataTable>
        <s-data-table :list="list" :columns="columns" :checked-row-keys="checkRows.map(it => it.id)"
          :loading="loading" />
      </template>
    </s-container>
    <n-modal v-model:show="showModal" title="部门" display-directive="if" :bordered="false" preset="card" size="huge"
      class="w-650px" :closable="false">
      <slef-form :formData="formData" :deptTree="list" @close="handleCloseModal" @list="getList"></slef-form>
    </n-modal>
  </div>
</template>

<script setup lang='tsx'>
import { ref, onMounted } from 'vue';
import { DataTableColumn, NSpace } from 'naive-ui';
import { useLoading } from '@/hooks';
import { SysDept } from './index'
import slefForm from './form.vue'
import { fetchDeptTree, fetchDept, fetchDeleteDept } from '@/service/api/sys/dept'
import { BusinessStatus } from '~/src/enum';
import SRowEditBtnVue from '~/src/components/custom/s-row-edit-btn.vue';
import SRowDelBtnVue from '~/src/components/custom/s-row-del-btn.vue';

interface DataSource extends SysDept { }

const columns: DataTableColumn<DataSource>[] = [
  {
    title: '部门名',
    key: 'name',
    align: 'center',
  },
  {
    title: '负责人',
    key: 'leader',
    align: 'center',
  },
  {
    title: '创建人',
    key: 'createBy',
    align: 'center',
  },
  {
    title: '创建时间',
    key: 'createTime',
    align: 'center',
  },
  {
    title: '创建人',
    key: 'updateBy',
    align: 'center',
  },
  {
    title: '更新时间',
    key: 'updateTime',
    align: 'center',
  },
  {
    title: "操作列",
    key: "",
    align: 'center',
    width: 200,
    fixed: 'right',
    render(rowData: DataSource) {
      return <NSpace justify="center" >
        <SRowEditBtnVue onClick={() => handleEditClick(rowData)}></SRowEditBtnVue>
        <SRowDelBtnVue click={() => handleDeletePositive(rowData)}></SRowDelBtnVue>
      </NSpace>
    }
  }
]

const list = ref<DataSource[]>([]);
const checkRows = ref<DataSource[]>([]);

const showModal = ref(false)
const formData = ref<DataSource>(initFormData());


const { loading, startLoading, endLoading, empty, setEmpty } = useLoading();
async function getList() {
  startLoading()
  const { data } = await fetchDeptTree()
  list.value = data!
  endLoading()
  setEmpty(!data || data.length == 0)
}
function handleCloseModal() {
  showModal.value = false;
}

function handleAddClick() {
  formData.value = initFormData()
  showModal.value = true;
}
async function handleEditClick(row: DataSource) {
  const { data } = await fetchDept(row.id!)
  if (data) {
    formData.value = data
    showModal.value = true;
  }
}
async function handleDeletePositive(row: DataSource) {
  const { error } = await fetchDeleteDept([row.id!])
  if (!error) {
    window.$message?.success("操作成功")
    getList()
  }
}
function handleQuery() {
  getList()

}
function initFormData(): DataSource {
  return {
    name: "", leader: "", weight: 0, status: BusinessStatus.Yes
  }
}
onMounted(() => {
  getList()
})
</script>

<style lang='scss' scoped></style>
